<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <!-- 页面meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>神州租车后台管理系统</title>
  <meta name="description" content="神州租车后台管理系统">
  <meta name="keywords" content="神州租车后台管理系统">

  <!-- Tell the browser to be responsive to screen width -->
  <meta
    content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    name="viewport">

  <link rel=“stylesheet”
        href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/morris/morris.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/select2/select2.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/css/style.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
  <link rel="stylesheet"
        href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrapValidator.min.css"/>

</head>

<body class="hold-transition skin-blue sidebar-mini">

<div class="wrapper">

  <!-- 页面头部 -->
  <jsp:include page="header.jsp"></jsp:include>
  <!-- 页面头部 /-->

  <!-- 导航侧栏 -->
  <jsp:include page="aside.jsp"></jsp:include>
  <!-- 导航侧栏 /-->

  <!-- 内容区域 -->
  <div class="content-wrapper">

    <!-- 内容头部 -->
    <section class="content-header">
      <h1>
        下单 <small>下单</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="all-admin-index.html"><i
          class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="all-order-manage-list.html">下单</a></li>
        <li class="active">下单</li>
      </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <form action="${pageContext.request.contextPath}/order/addOrder?pay=true"
          method="post" id="customerForm">
      <input type="hidden" name="id" value="${customer.id}"/>
      <section class="content"> <!--订单信息-->
        <div class="panel panel-default">
          <div class="panel-heading">选择下单</div>
          <div class="row data-type">

            <div class="col-md-2 title">选择店铺</div>
            <div class="col-md-4 data">
              <input type="hidden" name="rid" value="1"/>
              <select class="form-control select2" style="width: 100%" id="store"
                      name="getStoreCode">
                <c:forEach items="${store}" var="store">
                  <option value="${store.storeCode}">${store.name}</option>
                </c:forEach>
              </select>
            </div>

            <div class="col-md-2 title">选择车辆</div>
            <div class="col-md-4 data">
              <select class="form-control select2" style="width: 100%"
                      name="CarType" id="car">
                <option value="0" selected="selected">选择车辆</option>
              </select>
            </div>

            <div class="col-md-2 title">车辆价格</div>
            <div class="col-md-4 data">
              <input type="text" class="form-control" placeholder="车辆价格" name="cost" id="carCost"
                     value="" readonly="readonly">
            </div>

            <input type="hidden" name="crmId" value="${customer.id}"/>
            <input type="hidden" name="carNumber" value="AAAA200"/>
<%--            <input type="hidden" name="cost" value="200"/>--%>

            <div class="col-md-2 title">归还时间</div>
            <div class="col-md-4 data">
              <input type="text" class="form-control" id="datepicker-a3" name="backTime"
                     placeholder="归还时间" value="">
            </div>

            <div class="col-md-2 title">取车时间</div>
            <div class="col-md-4 data">
              <input type="text" class="form-control" id="datepicker-a4" name="getTime"
                     placeholder="取车时间" value="">
            </div>

            <div class="col-md-2 title">租赁方式</div>
            <div class="col-md-4 data">
              <select class="form-control select2" style="width: 100%"
                      name="rent">
                <option value=></option>
                <option value="日租">日租</option>
                <option value="月租">月租</option>
              </select>
            </div>

            <div class="col-md-2 title">租赁数量</div>
            <div class="col-md-4 data">
              <input type="text" class="form-control" placeholder="租赁数量" required="required" name="number"
                     value="" >
            </div>





          </div>
        </div>
        <div class="box-tools text-center">
          <button type="submit" class="btn bg-maroon">保存</button>
          <button type="button" class="btn bg-default"
                  onclick="history.back(-1);">返回</button>
        </div>


        <!--工具栏/--> </section>


    </form>
    <!-- 正文区域 /-->
    <div class="panel panel-default">
      <div class="panel-heading">订单信息</div>
      <!--数据列表-->
      <table id="dataList"
             class="table table-bordered table-striped table-hover dataTable">
        <thead>
        <tr>
          <th class="" size="5">id</th>
          <th class="">用户名字</th>
          <th class="">企业名字</th>
          <th class="">联系人</th>
          <th class="">联系方式</th>
          <th class="">地址</th>
          <th class="">工商注册号</th>
        </tr>
        </thead>
        <tbody>

<%--        <c:forEach var="customer" items="${customer}">--%>
          <tr>
            <td>${customer.id}</td>
            <td>${customer.username}</td>
            <td>${customer.name}</td>
            <td>${customer.contact}</td>
            <td>${customer.contactNumber}</td>
            <td>${customer.address}</td>
            <td>${customer.industrNumber}</td>
          </tr>
<%--        </c:forEach>--%>


        </tbody>
      </table>
      <!--数据列表/-->
    </div>

  </div>
  <!-- 内容区域 /-->

  <!-- 底部导航 -->
  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 0.02
    </div>
    <strong>Copyright &copy; 2017 <a
      href="http://www.ucarinc.com/">神州优车集团</a>.
    </strong> All rights reserved. </footer>
  <!-- 底部导航 /-->

</div>

<script
  src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<script
  src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/raphael/raphael-min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/morris/morris.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/sparkline/jquery.sparkline.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/knob/jquery.knob.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/daterangepicker/moment.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/datepicker/bootstrap-datepicker.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/fastclick/fastclick.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/select2/select2.full.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/markdown.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/ckeditor/ckeditor.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/chartjs/Chart.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.resize.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.pie.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.categories.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
  src="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrapValidator.min.js"></script>
<!-- 使用包含所有验证器的未压缩版本 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrapValidator.js"></script>

<script>
  $(document).ready(function() {
    // 选择框
    $(".select2").select2();

    // WYSIHTML5编辑器
    $(".textarea").wysihtml5({
      locale : 'zh-CN'
    });
  });

  // 设置激活菜单
  function setSidebarActive(tagUri) {
    var liObj = $("#" + tagUri);
    if (liObj.length > 0) {
      liObj.parent().parent().addClass("active");
      liObj.addClass("active");
    }
  }

  $(document).ready(function() {

    // 激活导航位置
    setSidebarActive("order-manage");

    // 列表按钮
    $("#dataList td input[type='checkbox']").iCheck({
      checkboxClass : 'icheckbox_square-blue',
      increaseArea : '20%'
    });
    // 全选操作
    $("#selall").click(function() {
      var clicks = $(this).is(':checked');
      if (!clicks) {
        $("#dataList td input[type='checkbox']").iCheck("uncheck");
      } else {
        $("#dataList td input[type='checkbox']").iCheck("check");
      }
      $(this).data("clicks", !clicks);
    });
  });


  $(document).ready(function() {
    $('#datepicker-a3').datetimepicker({
      format : "yyyy-mm-dd",
      autoclose : true,
      todayBtn : true,
      language : "zh-CN"
    });
  });

  $(document).ready(function() {
    $('#datepicker-a4').datetimepicker({
      format : "yyyy-mm-dd",
      autoclose : true,
      todayBtn : true,
      language : "zh-CN"
    });
  });

//联动菜单
  $("#store").change(function() {
    loadCar();
  });

  function loadCar() {
    var store_code = $("#store").find("option:selected").val();
    console.log(store_code)
    // alert(store_code)
    $.ajax({
      type: "post",
      url: "${pageContext.request.contextPath}/store/car",
      data: {
        storeCode: store_code
      },
      dataType: "json",
      async: true,
      success: function(result) {
        // console.log(result)
        var carlist = result;
        var str = ''
        for(var i = 0; i < carlist.length; i++) {
          // console.log(carlist[i].carId)
          // console.log(carlist[i].type)
          str += '<option selected = "selected" value=' + carlist[i].type + '>' + carlist[i].type + '</option>'
          // console.log(str)
        }
        $("#car").html(str);
        console.log("new_cost")
        loadCost();
      },
      error: function() {
        console.log("获取车辆失败");
      }
    });
  }

  $("#car").change(function() {
    loadCost();
    // alert("change_car")
    console.log("car_change")
  });

  function loadCost() {
    $("#carCost").val("");
    var store_code = $("#store").find("option:selected").val();
    var car_type = $("#car").find("option:selected").val();
    console.log(store_code)
    console.log("car:"+car_type)
    $.ajax({
      type: "get",
      url: "${pageContext.request.contextPath}/store/car",
      data: {
        storeCode: store_code,
        carType: car_type
      },
      dataType: "json",
      async: true,
      success: function(result) {
        console.log(result)
        var cost = result.cost;
        console.log(cost)
        $("#carCost").val(cost);
      },
      error: function() {
        console.log("获取价格失败");
      }
    });
  }
  //联动获取金钱
</script>
</body>


</html>
